<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>热门视频榜单</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/jquery-1.9.1.min.js"></script>

    <link rel="stylesheet" th:href="@{/static/css/style-starter.css}">
    <script th:src="@{/static/layui.js}"></script>
    <script th:src="@{/static/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            color: #333;
            background-color: #f7f7f7;
            margin-top: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }



        .navbar-brand {
            font-size: 24px;
            color: #333;
        }

        .nav-link {
            color: #333;
            font-size: 16px;
            padding: 10px 15px;
        }

        .nav-link:hover {
            color: #ff4e4e;
        }

        .hot-rank-header {
            margin: 60px 0 20px 0; /* 增加顶部外边距 */
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1001; /* 确保比 .navbar 的 z-index 高 */
        }

        .hot-rank-title {
            font-size: 24px;
            font-weight: bold;
        }

        .hot-rank-sort {
            margin-left: 20px;
        }

        .hot-rank-list {
            margin-top: 20px;
        }

        .hot-rank-item {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px #f0f1f2;
            padding: 12px;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }

        .hot-rank-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .hot-rank-thumb {
            width: 120px;
            height: 70px;
            object-fit: cover;
            border-radius: 8px;
        }

        .hot-rank-info {
            margin-left: 18px;
            flex: 1;
        }

        .hot-rank-video-title {
            font-size: 18px;
            font-weight: bold;
            color: #222;
        }

        .hot-rank-meta {
            color: #888;
            font-size: 13px;
            margin-top: 6px;
        }

        .hot-rank-pos {
            font-size: 22px;
            width: 40px;
            text-align: center;
            color: #ff4e4e;
            font-weight: bold;
        }

        /* 新增的 CSS 类 */
        .header-spacing {

            margin-bottom: 40px;

        }
        #site-header{
            max-height: 40px;
            margin-top: 0;
        }
        .container{
            max-height: 40px;
            margin-top: 0;
        }
        .navbar {
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 1000; /* 保持原有 z-index */
            margin-top: 0;
        }
    </style>
</head>
<body style="background:#f7f7f7;">

<!-- header -->
<header id="site-header" class="w3l-header fixed-top header-spacing">
    <!--/nav-->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <h3><a class="navbar-brand" th:href="@{/user/toIndex}">
                奇点短视频 </a></h3>
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="fa icon-expand fa-bars"></span>
                <span class="fa icon-close fa-times"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" th:href="@{/user/toIndex}">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/user/toRank}">热搜榜单</a>
                    </li>
                </ul>

                <!--/search-right-->
                <div class="search-right">
                    <a href="#search" class="btn search-hny mr-lg-3 mt-lg-0 mt-4" title="search">搜索<span
                            class="fa fa-search ml-3" aria-hidden="true"></span></a>
                    <!-- search popup -->
                    <div id="search" class="pop-overlay">
                        <div class="popup">
                            <form th:action="@{/video/search}" method="post" class="search-box">
                                <input type="search" placeholder="Search your Keyword" name="videoTitle"
                                       required="required" autofocus="">
                                <button type="submit" class="btn"><span class="fa fa-search"
                                                                        aria-hidden="true"></span></button>
                            </form>
                            <div class="browse-items">
                                <h3 class="hny-title two mt-md-5 mt-4">奇点搜索</h3>
                                <ul class="search-items">
                                    <li><a href="#">影视</a></li>
                                    <li><a href="#">新闻</a></li>
                                    <li><a href="#">生活</a></li>
                                    <li><a href="#">美食</a></li>
                                    <li><a href="#">音乐</a></li>
                                    <li><a href="#">电视剧</a></li>
                                    <li><a href="#">舞蹈</a></li>
                                    <li><a href="#">动漫</a></li>
                                    <li><a href="#">娱乐</a></li>
                                    <li><a href="#">科技数码</a></li>
                                    <li><a href="#">体育</a></li>
                                    <li><a href="#">美妆</a></li>
                                </ul>
                            </div>
                        </div>
                        <a class="close" href="#close">×</a>
                    </div>
                    <!-- /search popup -->
                    <!--/search-right-->
                </div>
            </div>
        </div>
    </nav>
    <!--//nav-->
</header>
<!-- //header -->

<div class="container">
    <div class="hot-rank-header">
        <span class="hot-rank-title">热门视频榜单</span>
        <label for="hot-rank-sort"></label><select id="hot-rank-sort" class="hot-rank-sort form-control">
            <option value="comprehensive">综合排序</option>
            <option value="view">播放量</option>
            <option value="like">点赞数</option>
            <option value="comment">评论数</option>
            <option value="share">分享数</option>
            <option value="collect">收藏数</option>
        </select>
    </div>
    <div id="hot-rank-list" class="hot-rank-list"></div>
</div>
<script>
    function loadHotRank(sortType) {
        $.get('/hotRank/list', {sortType: sortType}, function(data) {
            let html = '';
            data.forEach(function(item, idx) {
                html += `
                    <div class="hot-rank-item" onclick="window.location.href='/video/videoPlay?videoId=${item.videoId}'">
                        <div class="hot-rank-pos">${idx+1}</div>
                        <img src="${item.thunmbnailUrl || '/static/img/default.png'}" class="hot-rank-thumb"/>
                        <div class="hot-rank-info">
                            <div class="hot-rank-video-title">
                                <a href="/video/videoPlay?videoId=${item.videoId}" target="_blank">${item.videoTitle}</a>
                            </div>
                            <div class="hot-rank-meta">
                                作者：${item.userName || ''} &nbsp;|&nbsp;
                                播放：${item.viewCount || 0} &nbsp;|&nbsp;
                                赞：${item.likeCount || 0} &nbsp;|&nbsp;
                                评论：${item.commentCount || 0}
                                收藏：${item.pp_num || 0}
                            </div>
                        </div>
                    </div>
                    `;
            });
            $('#hot-rank-list').html(html);
        });
    }
    $('#hot-rank-sort').change(function() {
        loadHotRank(this.value);
    });
    $(function(){ loadHotRank('comprehensive'); });
</script>
</body>
</html>
